
<template>
  <div class="pedestal">
    <div class="chassis-light-2 chassis-light-2-1"></div>
    <div class="chassis-light-2 chassis-light-2-2"></div>
    <div class="chassis-light-2 chassis-light-2-3"></div>
    <div class="chassis-light-2 chassis-light-2-4"></div>
    <div class="chassis-09"></div>
  </div>
</template>

<script>
export default {
  name: 'Pedestal',

};
</script>

<style scoped lang="scss">

.pedestal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chassis-light-2{
  position: absolute;
  width: 350px;
  height: 350px;
  background: url("@/assets/rotate/chassis-light-2.png") no-repeat 50% 50%;
  transform: rotateX(-80deg) rotateZ(0deg) scale(0.5);
}
.chassis-light-2-2{
  bottom: -100px;
  animation: chassisRotate 3s 1s infinite linear;
}
.chassis-light-2-3{
  bottom: -115px;
  animation: chassisRotateA 3s 0.5s infinite linear;
  background: url("@/assets/rotate/chassis-light-2.png") no-repeat 50% 50%;
}
.chassis-light-2-4{
  bottom: -105px;
  animation: chassisRotateA 3s 1.5s infinite linear;
  background: url("@/assets/rotate/chassis-light-2.png") no-repeat 50% 50%;
}
.chassis-light-2-1{
  bottom: -120px;
  animation: chassisRotate 3s 0s infinite linear;
}
.chassis-09{
  box-sizing: border-box;
  animation: ripple 3s ease-out infinite;
  border-radius: 100%;
  border: 8px solid #00cdec;
  opacity: 0;
  width: 300px;
  height: 300px;
  transform: rotateX(-80deg) rotateZ(0deg) scale(0.5);
  border-radius: 100%;
  bottom: -100px;
  position: absolute;
}
@keyframes ripple{
  0%{
    opacity:0;
    transform:rotateX(-80deg) rotateZ(0deg) scale(0.1,0.1); }
  5%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:rotateX(-80deg) rotateZ(0deg) scale(1);
  }
}
@keyframes chassisRotate {
  0%{
    transform: rotateX(-80deg) rotateZ(0deg) scale(0.5);
  }
  100%{
    transform: rotateX(-80deg) rotateZ(360deg) scale(0.5);
  }
}
@keyframes chassisRotateA {
  0%{
    transform: rotateX(-80deg) rotateZ(360deg) scale(0.5);
  }
  100%{
    transform: rotateX(-80deg) rotateZ(0deg) scale(0.5);
  }
}

</style>
